<template>
    <div>
        <!-- 返回上一个页面  箭头 -->
        <BackHeader :title="title"></BackHeader>
        <div class="mainbox">
            <!-- 头像 -->
            <div class="touxiang">
                <img src="https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u3516.png"
                    alt="" />
            </div>
            <!-- 用户信息 -->
            <div class="userinfo">
                <p>西瓜</p>
                <p>好好学习，天天向上</p>
            </div>
            <ul class="infoul">
                <li>
                    <p>{{ info.readtime }}</p>
                    <p>阅读时长</p>
                </li>
                <!-- 跳转至粉丝/关注页面 -->
                <li @click="gopage('/fans')">
                    <p>{{ info.fans }}</p>
                    <p>关注</p>
                </li>
                <li @click="gopage('/fans')">
                    <p>{{ info.readtime }}</p>
                    <p>粉丝</p>
                </li>
            </ul>

            <!-- 书单 --><!-- 跳转至  书单详情页面 需要填写路由-->
            <ShuDan :shudan="shudan"></ShuDan>
            <!-- 最近阅读 --><!-- 跳转至  书籍详情页面 需要填写路由-->
            <ShuDan :shudan="reading"></ShuDan>
            <!-- 动态 -->
            <div class="dongtaibox">
                <h2>动态（{{ dongtailist.length }}）</h2>
                <ul>
                    <li v-for="(item, index) in dongtailist" :key="index">
                        <div class="information">
                            <img :src="item.img" class="left" />
                            <div class="left username">
                                <p>
                                    <span>{{ item.username }}</span><br />
                                    <span>{{ item.day }}</span>&nbsp;<span>{{ item.time }}</span>
                                </p>
                            </div>
                        </div>
                        <!-- 跳转至  评论详情页面  需要填写路由-->
                        <div class="dynamic" @click="gopage()">
                            {{ item.content }}
                        </div>
                        <div class="shuji">
                            <img :src="item.books.img" class="left">
                            <div class="left details">
                                <p>
                                    <span class="titlebook">{{ item.books.title }}</span><br>
                                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/%E8%B7%AF%E5%BE%84_u3559.png"
                                        class="xingxing" v-for="jtem in item.books.xing" :key="jtem">
                                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/%E8%B7%AF%E5%BE%84_u3563.png"
                                        class="xingxing" v-for="jtem in (5 - item.books.xing)" :key="jtem + 10">
                                    <span class="pingfen">{{ item.books.pingfen }}分</span><br>
                                    <span>【{{ item.books.international }}】</span><span>{{
                                        item.books.author
                                    }}</span><span class="gang">|</span><span>{{ item.books.type }}</span>
                                </p>
                            </div>

                        </div>
                        <div class="external">
                            <div>
                                <div class="dianzan left"></div>
                                <span class="left ">{{ item.books.dianzan }}</span>
                            </div>
                            <!-- 跳转至  评论详情页面  需要填写路由-->
                            <div @click="gopage()">
                                <div class="pinglun left"></div>
                                <span class="left ">{{ item.books.pinglun }}</span>
                            </div>
                            <div @click="openshare">
                                <!-- 打开分享 -->
                                <div class="zhuangfa left">
                                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/%E8%B7%AF%E5%BE%84_u3573.png"
                                        alt="">
                                </div>
                                <span class="left ">{{ item.books.zhuangfa }}</span>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="dixian">
                <div></div>
                <span>我是有底线的</span>
                <div></div>
            </div>
        </div>
        <!-- 分享 盒子  点击 关闭 -->
        <div class="share" v-show="shareshow" @click="closeshare">
            <div class="fenxiang">
                <p>立即分享给好友</p>
                <ul>
                    <li>
                        <div>
                            <img
                                src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1393.png">
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1394.png"
                                class="icon1">
                        </div>
                        <span>微信</span>
                    </li>
                    <li>
                        <div>
                            <img
                                src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1399.png">
                            <img src="	https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1397.png"
                                class="icon2">
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1398.png"
                                class="icon2-1">
                        </div>
                        <span>微博</span>
                    </li>
                    <li>
                        <div>
                            <img
                                src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1401.png">
                            <img src="	https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1402.svg"
                                class="icon3">
                        </div>
                        <span>复制链接</span>
                    </li>
                    <li>
                        <div>
                            <img
                                src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1401.png">
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%8D%95%E8%AF%A6%E6%83%85/u1404.png"
                                class="icon4">
                        </div>
                        <span>分享海报</span>
                    </li>
                </ul>
                <div class="kong"></div>
                <p>取消</p>
            </div>
        </div>
    </div>
</template>

<script>
import BackHeader from '@/components/mycomponents_jk/BackHeader.vue';
import ShuDan from '@/components/mycomponents_jk/ShuDan.vue';
export default {
    components: {
        BackHeader, ShuDan
    },
    name: "PersonalView",

    data() {
        return {
            title: "",
            info: {
                readtime: "9时30分",
                fans: 1,
                attention: 1
            },
            // 需要填写路由
            shudan: {
                title: "书单",
                lists: [
                    {
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u218.png",
                        introduce: "2022年必读的一本书",
                        url:""
                    },
                ]
            },
            // 需要填写路由
            reading: {
                title: "最近阅读",
                lists: [
                    {
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u217.png",
                        introduce: "夜莺与玫瑰",
                        url:""
                    },
                    {
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u218.png",
                        introduce: "电影的宿命",
                        url:""
                    },
                    {
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u216.png",
                        introduce: "夜莺与玫瑰",
                        url:""
                    },
                    {
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u215.png",
                        introduce: "赤壁之㦸",
                        url:""
                    },
                ]
            },

            dongtailist: [
                {
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/ellipse_24_u3566.png",
                    username: "西瓜",
                    day: "2022-05-20",
                    time: "10:00",
                    content: "我们人类和书很相似，每个人都有自己的故事，但最初谁也不了解谁，总是等待着被别人发现",
                    books: {
                        title: "置身事内",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/rectangle_46_u3556.png",
                        xing: 4,
                        pingfen: 9.0,
                        international: "日",
                        author: "吉竹伸介",
                        type: "漫画/治愈",
                        dianzan: 330,
                        pinglun: 3,
                        zhuangfa: 189
                    }
                },
                {
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/ellipse_24_u3566.png",
                    username: "西瓜",
                    day: "2022-05-20",
                    time: "10:00",
                    content: "我们人类和书很相似，每个人都有自己的故事，但最初谁也不了解谁，总是等待着被别人发现",
                    books: {
                        title: "置身事内",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/rectangle_46_u3556.png",
                        xing: 3,
                        pingfen: 8.5,
                        international: "日",
                        author: "吉竹伸介",
                        type: "漫画/治愈",
                        dianzan: 288,
                        pinglun: 6,
                        zhuangfa: 134
                    }
                },
                {
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/ellipse_24_u3566.png",
                    username: "西瓜",
                    day: "2022-05-21",
                    time: "11:00",
                    content: "我们人类和书很相似，每个人都有自己的故事，但最初谁也不了解谁，总是等待着被别人发现",
                    books: {
                        title: "置身事内",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/rectangle_46_u3556.png",
                        xing: 4,
                        pingfen: 9.1,
                        international: "日",
                        author: "吉竹伸介",
                        type: "漫画/治愈",
                        dianzan: 555,
                        pinglun: 99,
                        zhuangfa: 269
                    }
                }
            ],
            shareshow: false
        };
    },

    mounted() { },

    methods: {
        // 返回上一个页面
        goback() {
            this.$router.go(-1);
        },
        // 分享盒子显示
        openshare() {
            this.shareshow = true;
        },
        // 分享盒子隐藏
        closeshare() {
            this.shareshow = false;
        },
        // 跳转页面
        gopage(url){
            this.$router.push({
                path: url
            })
        }
        
    },
};
</script>

<style lang="less" scoped>
.mainbox {
    margin-top: 6rem;

    .touxiang {
        width: 13.4rem;
        height: 13.4rem;
        margin: 0 auto;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .userinfo {
        text-align: center;
        width: 100%;
        line-height: 2.6rem;

        p:nth-of-type(1) {
            font-size: 1.8rem;
            font-weight: bold;
            color: #11243d;
        }

        p:nth-of-type(2) {
            font-size: 1.4rem;
            color: #707a89;
        }
    }

    .infoul {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 2rem;
        padding: 0 2rem 1rem;
        text-align: center;

        li {
            cursor: pointer;

            p:nth-of-type(1) {
                color: #000;
                font-size: 1.6rem;
            }

            p:nth-of-type(2) {
                color: #707a89;
                font-size: 1.2rem;
            }
        }
    }

    .dongtaibox {
        width: 100%;
        padding: 1rem 2rem 0;
        margin-top: 1rem;
        border-top: 0.1rem solid rgb(218, 218, 218);

        ul li {
            margin-bottom: 2rem;
            border-bottom: 0.1rem solid rgb(218, 218, 218);
            padding-bottom: 1.5rem;

        }

        ul li:last-child {
            border: 0;
            padding-bottom: 0;
        }

        h2 {
            line-height: 4rem;
        }

        .information {
            width: 100%;
            height: 4.4rem;

            img {
                height: 4.4rem;
                margin-right: 1.5rem;
            }

            .username {
                height: 100%;
                display: flex;
                align-items: center;
                line-height: 1.8rem;

                span:nth-of-type(1) {
                    font-weight: bold;
                    font-size: 1.6rem;
                }
            }
        }

        .dynamic {
            font-size: 1.5rem;
            color: #666666;
            padding: 1.5rem 0;
            cursor: pointer;
        }

        .shuji {
            background-color: rgba(249, 249, 249, 1);
            width: 100%;
            height: 94px;
            border: none;
            border-radius: 8px;
            padding: 1rem;
            cursor: pointer;

            >img {
                height: 100%;
            }

            .details {
                display: flex;
                font-size: 1.2rem;
                color: #999999;
                margin-left: 1.5rem;
                height: 100%;
                align-items: center;
                line-height: 2rem;

                .titlebook {
                    font-weight: bold;
                    font-size: 1.6rem;
                    color: #000;
                }

                .xingxing {
                    width: 1.3rem;
                    height: 1.3rem;
                }

                .pingfen {
                    margin-left: 1rem;
                }

                .gang {
                    margin: 0 0.8rem;
                }
            }

        }

        .external {
            line-height: 1.8rem;
            font-size: 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999999;
            height: 4rem;

            >div {
                cursor: pointer;

                div {
                    width: 1.8rem;
                    height: 1.8rem;
                    margin-right: 1rem;
                    background-size: 1.8rem;
                }
            }

            .dianzan {
                background: url(https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E7%B1%8D%E8%AF%A6%E6%83%85/u2490.png) no-repeat;
            }

            .pinglun {
                background: url(https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E7%B1%8D%E8%AF%A6%E6%83%85/u2494.png) no-repeat;
            }

            .zhuangfa {
                background: url(https://cdn7.axureshop.com/demo/1182587/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/%E8%B7%AF%E5%BE%84_u3572.png) no-repeat;
                position: relative;

                img {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 0.8rem;
                    height: 0.8rem;
                    cursor: pointer;
                }
            }


        }
    }

    .dixian {
        color: #CCCCCC;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4rem;

        div {
            border-top: 0.1rem solid #cccccc;
            width: 25%;
            height: 0.1rem;
        }

        span {
            margin: 0 2rem;
        }
    }
}

.share {
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    animation: showtop ease 0.5s forwards;
    transform-origin: top;

    .fenxiang {
        width: 100%;
        position: absolute;
        bottom: 0;
        background-color: #fff;
        z-index: 99999;
        border-radius: 3rem 3rem 0 0;
        text-align: center;
        font-size: 1.4rem;

        p {
            line-height: 5rem;
        }

        ul {
            display: flex;
            justify-content: space-evenly;
            margin: 1rem;

            li {
                text-align: center;

                div {
                    width: 5rem;
                    height: 5rem;
                    position: relative;
                    border-radius: 50%;
                    margin: 0 auto;

                    img:nth-of-type(1) {
                        width: 100%;
                        height: 100%;
                    }

                    .icon1 {
                        width: 2rem;
                        height: 1.1rem;
                        position: absolute;
                        top: 1.7rem;
                        left: 1.6rem;
                    }

                    .icon2 {
                        width: 1.8rem;
                        height: 1.2rem;
                        position: absolute;
                        top: 2.3rem;
                        left: 1.5rem;
                    }

                    .icon2-1 {
                        width: 0.5rem;
                        height: 0.4rem;
                        position: absolute;
                        top: 2.8rem;
                        left: 2.2rem;
                    }

                    .icon3 {
                        width: 2.4rem;
                        height: 2.4rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .icon4 {
                        width: 2.4rem;
                        height: 2.1rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }

                span {
                    line-height: 3.4rem;
                }
            }
        }

        .kong {
            width: 100%;
            height: 1.5rem;
            background-color: rgb(218, 218, 218);
        }
    }
}

@keyframes showtop {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}
</style>
